import { Component } from 'react';

import {Table,Button,Boxs} from 'saltui';
const { HBox, Box } = Boxs;

import DB from '../../../../app/db';
import Upload from '../../../../components/upload';





export default class PageHome extends Component {

 constructor(props) {
    super(props);
    let t = this;
    this.state = {
      quesId : t.props.params.quesId,       //问卷id
      topicType : t.props.params.topicType, //题目类型
      topicId : t.props.params.topicId,     //题目id
      quesType: t.props.params.quesType,
      columns : [
        { dataKey: 'name', title: '姓名', align: 'center' },
        { dataKey: 'detail', title: '答案文本', align: 'center' },
      ],
      data : {},
    };
    dd.biz.navigation.setTitle({
            title: '查看详情',
            onSuccess: function(result) {},
            onFail: function() {}
        });
  }

  componentDidMount(){
  let t = this;
   DB.QuesModuleAPI.getOptionDetail({quesId:t.state.quesId,topicId:t.state.topicId,topicType:t.state.topicType}).then((content)=>{
    if(content.type == 'success'){
      let result = content.data;
      let data = [];
      for (let i = 0; i < result.length; i++) {
        if(this.state.topicType=='field'){
          data.push({'name':result[i].user_name,'detail':result[i].attJson,'fraction':result[i].fraction})
        }else{
          let answer = result[i].answer;
          if(answer!=null&&answer!=""){
            let arr = answer.split(";");
            let detail = arr.map((value)=>(
              <div>{value}<br/></div>
            ));
            data.push({'name':result[i].user_name,'detail':detail,'fraction':result[i].fraction})
          }else{
            data.push({'name':result[i].user_name,'detail':'无','fraction':result[i].fraction})
          }
        }        
      }
      let json = {'data':data};
      t.setState({
        data:json
      })

    }
   }).catch();
  }

  render() {
    const t = this;
    return (
      <div>
        <Box className="t-BCf t-P16 t-FS16 t-MB10">
          {t.state.data.data != undefined && t.state.data.data.length > 0?
          <Box className="t-MT8">
            <div >
              <table className="t-BCf dd-table grey" style={{/*tableLayout:"fixed"*/}}>
                <thead>
                <tr>
                  <th>姓名</th>
                  <th>答案文本</th>
                  {t.state.quesType == 'questionnaireExam' ? <th>分数</th> : ''}
                </tr>
                </thead>
                <tbody>
                {this.state.data.data.map((item, index) => (
                  <tr>
                    <td style={{width:"100px"}}>{item.name}</td>
                    <td className="t-WB" style={{textAlign: "left"}}>
                    {
                      this.state.topicType!='field'?item.detail
                      :((item.detail!=null&&item.detail!='')?<Upload
                          canAdd={false}
                          canDel={false}
                          label=""
                          initList={item.detail}
                          dir="questionnaire"
                          uploadType="file"
                          extensions=""
                          limitNo=""
                          fileSizeLimit={0}/>:'无')
                    }
                    </td>
                    {t.state.quesType == 'questionnaireExam' ? <td>{item.fraction}</td> : ''}
                  </tr>
                ))}
                </tbody>
              </table>
            </div>
            </Box>:
            <Box className="t-MT8">
              <div >
                <table className="t-BCf dd-table grey">
                  <thead>
                  <tr>
                    <th>姓名</th>
                    <th>答案文本</th>
                    {t.state.quesType == 'questionnaireExam' ? <th>分数</th> : ''}
                  </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td colSpan={t.state.quesType == 'questionnaireExam' ? "3" : "2"}>暂无数据</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </Box>
          }

        </Box>
      </div>
      );
    }
}


